<template>
  <div class="backup-preview">
    <div class="preview-toolbar">
      <button class="back-btn" @click="goCourses">返回课程导航</button>
    </div>
    <div ref="mountEl"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { createApp } from 'vue'
import SampleApp from '@/backup/029_路由_嵌套路由/App.vue'
import sampleRouter from '@/backup/029_路由_嵌套路由/router/index.ts'
const mountEl = ref(null)
let appInstance = null
const router = useRouter()
const goCourses = () => router.push('/courses')
onMounted(()=>{ appInstance = createApp(SampleApp); appInstance.use(sampleRouter); appInstance.mount(mountEl.value) })
onBeforeUnmount(()=>{ if(appInstance){ appInstance.unmount(); appInstance = null } })
</script>
<style scoped>
.backup-preview{padding:0}
.preview-toolbar { padding: 8px; border-bottom: 1px solid #eee; background: #fafafa; position: sticky; top: 0; z-index: 2; }
.back-btn { padding: 6px 12px; border: 1px solid #409eff; background: #409eff; color: #fff; border-radius: 4px; cursor: pointer; }
.back-btn:hover { opacity: 0.9; }
</style>